<!-- form表单，规则详解：https://www.cnblogs.com/kuki/p/15190259.html-->
<template>
	<div>
		<el-form ref="form" :model="form" label-width="180px">
			<el-form-item label="上传文件">
				<el-upload
					class="upload-demo"
					ref="uploadBox"
					action="action"
					drag
					:auto-upload="false"
					:multiple="false"
					:limit="1"
					:file-list="fileLists"
					:on-change="
						(file, fileList) => {
							handleChange(file, fileList)
						}
					"
					:on-remove="handleRemove"
				>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</el-form-item>
			<el-form-item label="描述">
				<el-input
					type="textarea"
					v-model="form.desc"
					class="textarea1111"
					placeholder="请输入描述（最多50字符）"
					@change="changeValue"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { PopupCommon } from "@/libs/popupCommon"
	import { Utility } from "@/libs/utility"
	export default {
		components: {},
		data() {
			return {
				form: {
					desc: "",
				},
				fileLists: [],
				fileValue: "",
			}
		},
		methods: {
			changeValue(e) {
				if (e.length > 50) {
					this.form.desc = e.substring(0, 50)
				}
			},
			handleRemove(file, fileList) {
				console.log(fileList, file)
				this.fileValue = ""
			},
			/** 文件选择后的操作 */
			handleChange(file) {
				//获取上传文件大小
				let fileSize = Number(file.size / 1024 / 1024)
				var limitSize = Utility.getLimitSize()
				if (fileSize > limitSize) {
					PopupCommon.notify(
						"warning",
						`文件大小不能超过${limitSize}MB，请重新上传。`
					)
					this.fileLists.splice(0, 1)
					return
				}
				this.fileValue = file.raw
			},
			compressJsonStr(jsonStr) {
				return JSON.stringify(JSON.parse(jsonStr))
			},
			submitForm() {
				if (this.fileValue == "") {
					PopupCommon.notify("info", `请选择文件`)
					return
				}
				var value = this.form.desc
				console.log(value, "value....")
				this.$emit("getData", {
					SingeFile: this.fileValue,
					Description: value,
				})
			},
		},
		mounted() {},
		destroyed() {},
	}
</script>

<style>
	.textarea1111 textarea {
		height: 100px;
	}
</style>
